<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script src="../js/jquery.js"></script>
  <script src="../js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 头部 -->
  <div class="top">
    <div class="header same">
      <div class="top center flex">
        <div class="header_left flex">
          <img src="../img/top1.png" alt="">
          <img src="../img/top2.png" alt="">
          <img src="../img/top3.png" alt="">
          <img src="../img/top4.png" alt="">
          <img src="../img/top5.png" alt="">
        </div>
        <div class="header_right  flex" >
          <div class="emli flex">
            <img src="../img/1_06.png" alt="">
            <p>ContacUst@Gmail.com</p>
          </div>
          <div class="emli flex">
            <img src="../img/1_03.png" alt="">
            <p>80 88888 7</p>
          </div>
        </div>
      </div>
    </div>
    <!-- top_header -->
    <div class="nav same">
      <div class="navs center flex">
        <div class="logo"> <img src="../img/1_11.png" alt=""></div>
        <ul class="flex">
          <li><a href="index.html" class="active">HOME</a></li>
          <li><a href="blog.html">BLOG</a></li>
          <li><a href="aboutus.html">ABOUT US</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </div>
    </div>
    <!-- top_nav -->
    <div class="same banner">
      <div class="banner_cot center">
        <div class="wenzi">
          <h1>SEE &nbsp; THE&nbsp; WORD&nbsp; DIFFERENTLY</h1>
          <p>Request,design and book travel experiences as uniquelas you are</p>
        </div>
        <div class="search">
          <input type="search" placeholder="Where are you going ?"> 
          <button type="button" >
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            Search
          </button>
        </div>
        <div class="paris">
          <p>TOP DESTINATION: PARIS ,ZNEWYORKLONDON ROMESANFRANC c  MORE..</p>
        </div>
      </div>
    </div>
    <!-- top_bnaner -->
  </div>

  <!-- 内容 -->
  <div class="container_one ">
      <div class="container_box flex center">
        <dl>
          <dt><img src="../img/1_17.png" alt=""></dt>
          <dd>
            <h3>Civita di Bagnoregio,italia</h3>
            <p>April 14,2015</p>
            <p>uploaded by <span>John Doe</span> </p>
          </dd>
        </dl>
        <dl>
          <dt><img src="../img/1_17.png" alt=""></dt>
          <dd>
            <h3>Tuscany, ltaly</h3>
            <p>April 14,2015</p>
            <p>uploaded by <span>John Doe</span> </p>
          </dd>
        </dl>
        <dl>
          <dt><img src="../img/1_20.png" alt=""></dt>
          <dd>
            <h3> Picturesque Lake Como</h3>
            <p>April 14,2015</p>
            <p>uploaded by <span>John Doe</span> </p>
          </dd>
        </dl>
      </div>
  </div>
  <!-- 关于我们 -->
  <div class="container_tow same">
      <div class="tow_title center">
        <h3>ABOUT US</h3>
        <p class="bor"></p>
        <p class="notes">
          Nulla eget mauris quis elit mollis ornare vitae ut odio.Cras tincidunt, augue vitae sollicitudin commodo, quam elit varius est, etornare ante massa quis tellus.Mauris nec lacinia nisl.Curabitur tempus tellus et vulputate vestibulum.
        </p>
      </div>
      <div class="two_cont flex center">
        <dl class="two_conts">
          <dt><img src="../img/1_26.png" alt=""></dt>
          <dd>
            <h3>Lorem ipsum dolor</h3>
            <p>Lorem ipsum dolor sit amet,consectetuer</br>
              adipiscing elit,sed euismod tincidunt ut</br>
              laoreet dolore magna aliquam erat</br>
              volutpat.Ut wisi enim ad</br>
            </p>
          </dd>
        </dl>
        <dl class="two_conts">
          <dt><img src="../img/1_29.png" alt=""></dt>
          <dd>
            <h3>Lorem ipsum dolor</h3>
            <p>Lorem ipsum dolor sit amet,consectetuer</br>
              adipiscing elit,sed euismod tincidunt ut</br>
              laoreet dolore magna aliquam erat</br>
              volutpat.Ut wisi enim ad</br>
            </p>
          </dd>
        </dl>
        <dl class="two_conts">
          <dt><img src="../img/1_32.png" alt=""></dt>
          <dd>
            <h3>Lorem ipsum dolor</h3>
            <p>Lorem ipsum dolor sit amet,consectetuer</br>
              adipiscing elit,sed euismod tincidunt ut</br>
              laoreet dolore magna aliquam erat</br>
              volutpat.Ut wisi enim ad</br>
            </p>
          </dd>
        </dl>
      </div>
      <div class="two_butt center">
        <button>MORE</button>
      </div>
  </div>
  <!-- Curabitur -->
  <div class="container_baner same">
      <img src="../img/1_61.png" alt="">
  </div>
  <!-- SERVICES -->
  <div class="container_three same">
      <div class="tow_title center">
        <h3>SERVICES</h3>
        <p class="bor"></p>
        <p class="notes">
          Nulla eget mauris quis elit molli ornare vitae ut odio.Cras tincidunt, augue vitae sollicitudin commodo, quam elit varius est, etornare ante massa quis tellus.Mauris nec lacinia nisl. Curabitur tempus tellus et vulputate vestibulum.
        </p>
      </div>
      <div class="three_cont center flex">
        <dl>
          <dt><img src="../img/1_38.png" alt=""></dt>
          <dd class="three_tit"> Henderit Mauris</dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
        <dl>
          <dt><img src="../img/1_38.png" alt=""></dt>
          <dd class="three_tit"> Henderit Mauris</dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
        <dl>
          <dt><img src="../img/1_40.png" alt=""></dt>
          <dd class="three_tit"> Henderit Mauris</dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
        <dl>
          <dt><img src="../img/1_43.png" alt=""></dt>
          <dd class="three_tit"> Henderit Mauris</dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
        <dl>
          <dt><img src="../img/1_46.png" alt=""></dt>
          <dd class="three_tit">Lorem ipsum dolor
          </dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
        <dl>
          <dt><img src="../img/1_52.png" alt=""></dt>
          <dd class="three_tit">Lorem ipsum dolor
          </dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
        <dl>
          <dt><img src="../img/1_53.png" alt=""></dt>
          <dd class="three_tit">Lorem ipsum dolor
          </dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
        <dl>
          <dt><img src="../img/1_54.png" alt=""></dt>
          <dd class="three_tit">Lorem ipsum dolor
          </dd>
          <dd class="three_tits">raesent vestibuluolestie lacus</dd>
        </dl>
      </div>


  </div>
  <!-- Curabitur -->
  <div class="container_baner same">
      <img src="../img/1_61.png" alt="">
  </div>
  <!-- latest News -->
  <div class="container_four same">
      <div class="four_cont center flexs">
        <div class="four_left">
          <div class="four_lefttop flex">
            <img src="../img/1_65.png" alt="">
            <div class="four_introduce">
              <h4>
                Nam libero tempore, cum soluta nobis
              </h4>
              <p class="four_col">
                By <span>Danny</span>  on April 14,2015
              </p>
              <p>
                Nam libero tempore, cum soluta nobis esteligendi optio cumque quod maximeplaceat facere possimus nihil impedit quominus id quod maxime placeat facerepossimus.
              </p>
            </div>
          </div>
          <div class="four_leftBottom flex">
            <div class="four_name">
              <img src="../img/1_68.png" alt="">
              <h4>Nam libero tempore,cum soluta nobis
              </h4>
            </div>
            <div class="four_name ">
              <img src="../img/1_70.png" alt="">
              <h4>Nam libero tempore,cum soluta nobis
              </h4>
            </div>
            <div class="four_name">
              <img src="../img/1_72.png" alt="">
              <h4>Nam libero tempore,cum soluta nobis
              </h4>
            </div>
          </div>
        </div>
        <div class="four_right">
          <h2>Latest News</h2>
          <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
              <span class="sr-only">50% Complete (warning)</span>
            </div>
          </div>
          <ul>
            <li>
              <a href="#">&gt;Lorem ipsum dolor sit amet,consectetur
                elit.
              </a>
            </li>
            <li>
              <a href="#">&gt;Nullam venenatis lacus a elit fermentum.
              </a>
            </li>
            <li>
              <a href="#">&gt; Morbi ut sapien nec nisl pulvinar suscipit.
              </a>
            </li>
            <li>
              <a href="#">&gt;Integer a enim ac ex porta molestie ut atex.
              </a>
            </li>
            <li>
              <a href="#">&gt;Sed in nunc non eleifend laoreet eu quise
                lit.
              </a>
            </li>
            <li>
              <a href="#">&gt;Nullam venenatis lacus fermentum.
              </a>
            </li>
            <li>
              <a href="#">&gt;Lorem ipsum dolor sit amet, consecteture
                lit.
              </a>
            </li>
          </ul>
        </div>
      </div>
  </div>

  <!-- 底部 -->
  <div class="bottom same">
    <div class="bottom_top center flexs">
      <div class="botTop_left">
        <img src="../img/1_78.png" alt="">
        <p>
          Nam libero tempore,cum soluta nobis esteligendi optio cumque quod maxime
          placeat cum soluta nobis facere possimusnihil impedit quo minus id quod maximeplaceat facere possimus. est eligendioptio cumque
        </p>
        <p>
          facere possimus nihil impedit quo minusid quod maxime placeat facere possimus.
        </p>
      </div>
      <div class="botTop_left">
        <h3>News Letter</h3>
        <div class="progress">
          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">50% Complete (warning)</span>
          </div>
        </div>
        <p>
          facere possimus nihil iimpedit quo minusid quod maxime placeat facere possimus.est eligendi
        </p>
        <input type="text" placeholder="Enter your emall adaress...">
        <button>SUBCRIBE NOW</button>
      </div>
      <div class="botTop_left">
        <h3>News Letter</h3>
        <div class="progress">
          <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">50% Complete (warning)</span>
          </div>
        </div>
        <div class="photos flex">
          <img src="../img/1-2_03.png" alt="">
          <img src="../img/1-2_03.png" alt="">
          <img src="../img/1-2_03.png" alt="">

        </div>
      </div>
    </div>
  </div>
  <div class="bottoms same">
    <p>Copyright D 2015.Company name All rights reserved.氧设计</p>
  </div>
  
</body>
</html>